<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<style>
@page {
    size: 400pt 500pt;
    margin: 35pt;
}

html {
    font-family: sans-serif;
    font-size: 12pt;
}

table {
    border-collapse: collapse;
}

table + table {
    margin-top: 10pt;
}

td {
    padding: 2pt;
}

.title {
    font-style: italic;
}

.solid1 td {
    border: thick solid rgb(0 0 255 / 0.4);
}

.solid2 td {
    border: 1pt solid rgb(0 0 255 / 0.4);
}

.dashed1 td {
    border: thick dashed rgb(0 0 255 / 0.4);
}

.dashed2 td {
    border: 1pt dashed rgb(0 0 255 / 0.4);
}

.dotted1 td {
    border: thick dotted rgb(0 0 255 / 0.4);
}

.dotted2 td {
    border: 1pt dotted rgb(0 0 255 / 0.4);
}
</style>
</head>

<body>
<table class="solid1">
    <tr>
        <td class="title">Solid border A</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>

<table class="solid2">
    <tr>
        <td class="title">Solid border B</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>

<table class="dashed1">
    <tr>
        <td class="title">Dashed border A</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>

<table class="dashed2">
    <tr>
        <td class="title">Dashed border B</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>

<table class="dotted1">
    <tr>
        <td class="title">Dotted border A</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>

<table class="dotted2">
    <tr>
        <td class="title">Dotted border B</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
    <tr>
        <td>Lorem ipsum amet</td>
        <td>dolor sit</td>
        <td>amet</td>
    </tr>
</table>
</body>

</html>
